<template>
    <div class="grid-content bg-purple">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <i class="el-icon-data-analysis" style="font-size: 20px;color: rgb(4, 4, 159);"></i>
                <span>订单统计</span>
            </div>
            <div id="main" style="width: 300px;height: 200px;"></div>
            <!-- {{ time }} -->
        </el-card>
    </div>
</template>

<script>
import { selectIndent } from '@/api/dashboard.js'
// import Schart from 'vue-schart';
import * as echarts from 'echarts';
export default {
    // name:'order',
    props: ['childtime'],
    data() {
        return {
            myChart: null,
            endtime: ''
        }
    },
    mounted() {
        // console.log(this.endtime);
        this.endtime = this.childtime
        this.myChart = echarts.init(document.getElementById('main'));
        this.handleechart1()
    },
    methods: {
        async handleechart1() {
            let myChart = this.myChart
            // var dayjs = require('dayjs')

            if (this.endtime) {
                this.endtime = this.$day(this.endtime).format('YYYY-MM-DD')
            } else {
                this.endtime = this.$day(new Date()).format('YYYY-MM-DD')
            }
            let obj = {
                endtime: this.endtime
            }
            let param = new URLSearchParams(obj)
            // console.log(obj);
            const res = await selectIndent('/selectIndentTypeCount',param)
            // console.log(res.data);

            // console.log(res,'11111');

            myChart.setOption({
                legend: {
                    orient: 'vertical',
                    left: 10,
                    data: ['汽车保养', '汽车维修','洗车']
                },
                series: [
                    {
                        name: '车联网',
                        type: 'pie',
                        radius: '55%',
                        data: res.data,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
            })
            // this.myChart=myChart
        }
    }
}
</script>

<style  scoped></style>